<template>
<Card dis-hover>
    <p slot="title">
        <Tag v-for="(stat, key) in status" :key="key" checkable :color="stat.color" @on-change="changeStatus" :name="key" style="cursor: pointer;">{{key}}</Tag>
    </p>
    <Select v-model="unitnum" style="width:200px;margin-top: -2px;" slot="extra" :placeholder="placeholder" @on-change="onChange">
        <Option v-for="(unit, index) in buildingInfo" :value="index" :key="index">{{ index + 1 }}单元</Option>
    </Select>
    <div>
        <!-- 地上 -->
        <div v-for="(floor, index) in storeyaboveFloorList" :key="index + 1">
            <div class="floor">
                <div class="floorNum" :id="'floor' + index">
                    {{storeyaboveFloorList.length - index}}层<a :href="'#'+ index"></a>
                </div>
                <div class="houses">
                    <span v-for="house in floor" :key="house.id" class="house" @click="houseClick(house.id)" v-if="status[house.usename].checked" :id="house.id">
                        <Icon custom="iconfont icon-fangwu" :color="status[house.usename].color" size="34" />{{house.housenum}}
                    </span>
                </div>
            </div>
        </div>
        <!-- 地下 -->
        <div v-for="(floor, index) in storeyunderFloorList" :key="-(index + 1)">
            <div class="floor">
                <div class="floorNum" :id="'floor' + index">
                    {{-(index + 1)}}层<a :href="'#'+ index"></a>
                </div>
                <div class="houses">
                    <span v-for="house in floor" :key="house.id" class="house" @click="houseClick(house.id)" v-if="status[house.usename].checked">
                        <Icon custom="iconfont icon-fangwu" :color="status[house.usename].color" size="34" />{{house.housenum}}
                    </span>
                </div>
            </div>
        </div>
    </div>

</Card>
</template>

<script>
export default {
    data() {
        return {
            storeyaboveFloorList: [],
            storeyunderFloorList: [],
            buildingInfo: {
                storeyabove: [],
                storeyunder: []
            },
            unitnum: '',
            placeholder: "",
            border: "",
            status: {
                "出租": {
                    checked: true,
                    color: "#ed4014"
                },
                "自住": {
                    checked: true,
                    color: "#19be6b"
                },
                "待租": {
                    checked: true,
                    color: "#f90"
                },
                "空置": {
                    checked: true,
                    color: "#bbb"
                },
                "企业": {
                    checked: true,
                    color: "#2d8cf0"
                }
            }
        }
    },
    methods: {
        houseClick(id) {
            if (id)
                this.$router.push({
                    path: "/datacenter/geography/details/house",
                    query: {
                        id: id
                    }
                });
        },
        async getBuildingInfo() {
            this.placeholder = "数据加载中..."
            let res = await this.$api.geography.getBuildingInfoById({
                id: this.$route.query.id,
            })

            let building = res.rows[0]
            let storeyabove = building.storeyabove
            let storeyunder = building.storeyunder
            let unitnum = building.unitnum

            let units = Array.apply(null, {
                length: unitnum
            }).map(function (unit) {
                unit = {}
                let storeyaboveFloor = Array.apply(null, {
                    length: storeyabove
                })
                let storeyunderFloor = Array.apply(null, {
                    length: storeyunder
                })

                unit.storeyabove = storeyaboveFloor
                unit.storeyunder = storeyunderFloor

                return unit
            })

            this.buildingInfo = await this.getHouseInfo(units)
            
            this.storeyaboveFloorList = JSON.parse(JSON.stringify(this.buildingInfo[0].storeyabove))  
            this.storeyaboveFloorList.reverse()
            this.storeyunderFloorList = this.buildingInfo[0].storeyunder

            this.placeholder = "选择一个单元"
            this.unitnum = 0 //默认显示1单元
        },
        async getHouseInfo(units) {
            let that = this
            let res = await this.$api.geography.houseList({
                buildingid: this.$route.query.id,
                page: 1,
                rows: 10000
            })
            res.rows.map(function (house) {
                let fooltype = "storeyabove"
                let housefloor = house.floor - 1
                if (house.floor < 0) {
                    fooltype = "storeyunder"
                    housefloor = -parseInt(house.floor) - 1
                }
                let floor = units[parseInt(house.unit) - 1][fooltype][housefloor]
                if (!floor) {
                    floor = []
                }
                floor.push(house)
                units[parseInt(house.unit) - 1][fooltype][housefloor] = floor
            })

            return units
        },
        changeStatus(status, name) {
            this.status[name].checked = status
        },
        onChange(value){
            this.storeyaboveFloorList = JSON.parse(JSON.stringify(this.buildingInfo[value].storeyabove))  
            this.storeyaboveFloorList.reverse()
            this.storeyunderFloorList = this.buildingInfo[value].storeyunder
        }
    },
    created() {
        this.getBuildingInfo()
    },
}
</script>

<style lang="less" scoped>
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.ivu-card-head p {
    height: auto;
}

.floor {
    margin: 10px;
}

.floorNum {
    background-color: rgba(0, 0, 0, 0.075);
    padding: 5px 10px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.houses {
    min-height: 55px;
}

.house {
    cursor: pointer;
    margin: 0px 15px;
    display: inline-grid;
    text-align: center;
}
</style>
